<template>
	<rx-dialog @ok="handleSubmit" @cancel="cancel">
		<div style="padding: 10px">
			<a-button type="primary" @click="add">{{i18n('increase','添加')}}</a-button>
			<div style="margin-top: 10px">
				<a-table size="small"  :columns="columns" :data-source="forewarningList" :pagination='false'>
                    <template #bodyCell="{ column,record,index }">
                        <!--范围-->
                        <div style="display: flex">
                          <template v-if="column.key === 'range'" style="display: flex">
                            <a-select
                                style="width: 100px"
                                class="radius"
                                :getPopupContainer="p=>p.parentNode"
                                label-in-value
                                :default-value="{ key: record.range.type}"
                                @change="handleChange($event,record)"
                            >
                              <a-select-option v-for="(aselecvt,index) in compare" :key="index" :value="aselecvt.value">
                                {{ aselecvt.name }}
                              </a-select-option>
                            </a-select>
                            <a-input class="radius" v-if="record.range.type!='in'" type="number"
                                     :placeholder="i18n('fixedValue','固定数值')"
                                     v-model:value="record.range.figure"/>
                            <!--范围判断-->
                            <a-input class="radius" v-if="record.range.type=='in'"  type="number"
                                     :placeholder="i18n('geq','大于等于')"
                                     v-model:value="record.range.greaterThan"/>
                            <a-input class="radius" v-if="record.range.type=='in'" type="number"
                                     :placeholder="i18n('leq','小于等于')"
                                     v-model:value="record.range.lessThan"/>
                          </template>
                          <!--选择判断的度量-->
                          <template v-if="column.key === 'measure'" >
                            <a-select style="width: 100%" v-model:value="record.measure" :getPopupContainer="p=>p.parentNode">
                              <template v-for="(obj,index) in dimensions">
                                <template v-if="obj.dataType=='number' || obj.dataType=='int'">
                                  <a-select-option  :key="index" :value="obj.tableName+'_'+obj.fieldName">
                                    {{obj.fieldLabel}}
                                  </a-select-option>
                                </template>
                              </template>
                            </a-select>
                          </template>
                          <!--背景颜色-->
                          <template v-if="column.key === 'background'" >
                            <rx-input-color v-model="record.background" :color="record.background" style="width: 100%;margin-right: 17px"></rx-input-color>
                          </template>
                          <template v-if="column.key === 'action'" >
                            <span class="delByIds" @click="delByIds(index)">{{i18n('delBtn','删除')}}</span>
                          </template>
                        </div>
                    </template>
				</a-table>
			</div>
		</div>
	</rx-dialog>
</template>

<script>
import {Util,RxDialog} from "@lowcode/jpaas-base-lib";
import RxInputColor from "./rx-input-color.vue"

export default {
	name: "TableForewarning",
	props: [ 'destroy', 'forewarningConfig', 'dimensions','fullScreenShow'],
	components: {
		RxInputColor,
        RxDialog
	},
	data() {
		return {
			forewarningList: [],
			columns: [
				{title:this.i18n('rangeExpression','范围表达式') , key: 'range', dataIndex: 'range', scopedSlots: {customRender: 'range'}, width: 200},
				{title:this.i18n('measure','度量'), key: 'measure', dataIndex: 'measure', scopedSlots: {customRender: 'measure'}, width: 100},
				{title:this.i18n('backgroundColor','背景颜色'), key: 'background', dataIndex: 'background', scopedSlots: {customRender: 'background'}, width: 100},
				{title:this.i18n('action','操作'), width: 100, dataIndex: 'action',  key: 'action', scopedSlots: {customRender: 'action'}}
			],
			compare: [
				{
					value: 'eq',
					name: this.i18n('eq', '等于')
				},
				{
					value: 'gt',
					name: this.i18n('overtake', '大于')
				},
				{
					value: 'ge',
					name: this.i18n('geq', '大于等于')
				},
				{
					value: 'lt',
					name: this.i18n('under', '小于')
				},
				{
					value: 'le',
					name: this.i18n('leq', '小于等于')
				},
				{
					value: 'in',
					name: this.i18n('range', '范围')
				}
			],
		}
	},
	mounted() {
		this.forewarningList = JSON.parse(JSON.stringify(this.forewarningConfig))
	},
	methods: {
		i18n(name, text, key) {
			return this.$ti18(name, text, "tableForewarningLang", key);
		},
		handleChange(value, record) {
			if (value) {
				record.range.type = value.value;
			}
		},
		add() {
			if(this.fullScreenShow && this.forewarningList.length>=1){
				this.$message.info(this.i18n('rowAlerts','行模式只能添加一组预警'));
				return
			}else {
				this.forewarningList.push({
					range: {
						type: 'eq',
						figure: 1000,//等于，大于，小于对比的数字
						greaterThan: 0,//范围判断大于等于，大于对比的数字
						lessThan: 1000,//范围判断小于等于，小于的数字
					},
					measure:'',
					background:'rgb(255,100,100,0.5)'
				})
			}
		},
		handleSubmit() {
			Util.closeWindow(this, "ok", this.forewarningList);
		},
		cancel() {
			Util.closeWindow(this, "cancel");
		},
		delByIds(index) {
			this.forewarningList.splice(index, 1)
		}
	},
}
</script>

<style scoped>
.radius{
	flex: 1;
	margin: 0px 5px;
}
.delByIds{
	color: red;
	cursor: pointer;
}
</style>
